import { Row, Col } from 'antd';
import './comment.css'
import 'antd/dist/antd.css';
const DemoBox = (props) => {
  const { value, children } = props
  return <p style={{ height: { value } }}>{children}</p>
}

export default () => (
  <>
    {/*  24的栅格系统 */}
    <Row>
      <Col span={24}>col</Col>
    </Row>
    <Row>
      <Col span={12}>col-12</Col>
      <Col span={12}>col-12</Col>
    </Row>
    <Row>
      <Col span={8}>col-8</Col>
      <Col span={8}>col-8</Col>
      <Col span={8}>col-8</Col>
    </Row>
    <Row>
      <Col span={6}>col-6</Col>
      <Col span={6}>col-6</Col>
      <Col span={6}>col-6</Col>
      <Col span={6}>col-6</Col>
    </Row>
    {/* offset 向右偏移 */}
    <Row>
      <Col span={8}>col-8</Col>
      <Col span={8} offset={8}>
        col-8  offset 向右偏移8
      </Col>
    </Row>
    {/* push 向右移动, pull 向左移动*/}
    <Row>
      <Col span={18} push={6}>
        col-18 col-push-6  本应该在最左边
    </Col>
      <Col span={6} pull={18}>
        col-6 col-pull-18
    </Col>
    </Row>

    {/* justify 定义在row里边 子类元素的排列的方式 start 靠左,  center 居中,end 靠右 
  space-between 先两边再中间 space-around 两边都有间隔,左右均分   space-evenly 每个间隔均分
  */}
    <Row justify="start">
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
    </Row>

    <Row justify="center" align="middle">
      <Col span={4}>
        {/* DemoBox 在下边定义了 */}
        <DemoBox value={200}>col-4 高度变大</DemoBox>
      </Col>
      <Col span={4}>
        <DemoBox value={50}>col-4 高度变大</DemoBox>
      </Col>
    </Row>
    {/* order 排列的顺序 */}
    <Row>
      <Col span={6} order={4}>
        1 col-order-4
      </Col>
      <Col span={6} order={3}>
        2 col-order-3
      </Col>
      <Col span={6} order={2}>
        3 col-order-2
      </Col>
      <Col span={6} order={1}>
        4 col-order-1
      </Col>
    </Row>
    <p>


      响应式布局 <br />

xs	屏幕 &gt; 576px 响应式栅格，可为栅格数或一个包含其他属性的对象 <br />
sm	屏幕 ≥ 576px 响应式栅格，可为栅格数或一个包含其他属性的对象< br />
md	屏幕 ≥ 768px 响应式栅格，可为栅格数或一个包含其他属性的对象 <br />
lg	屏幕 ≥ 992px 响应式栅格，可为栅格数或一个包含其他属性的对象 <br />
xl	屏幕 ≥ 1200px 响应式栅格，可为栅格数或一个包含其他属性的对象 <br />
xxl	屏幕 ≥ 1600px 响应式栅格，可为栅格数或一个包含其他属性的对象 <br />
</p>
    <Row>
      <Col xs={2} sm={4} md={6} lg={8} xl={10}>
        Col xs=2 sm=4 md=6 lg=8 xl=10
      </Col>
      <Col xs={20} sm={16} md={12} lg={8} xl={4}>
        Col xs=20 sm=16 md=12 lg=8 xl=4
    </Col>
      <Col xs={2} sm={4} md={6} lg={8} xl={10}>
        Col  xs=2 sm=4 md=6 lg=8 xl=10
    </Col>
    </Row>

    <Row>
      <Col span={6} xs={{ order: 1 }} sm={{ order: 2 }} md={{ order: 3 }} lg={{ order: 4 }}>
        1 col-order-responsive
      </Col>
      <Col span={6} xs={{ order: 2 }} sm={{ order: 1 }} md={{ order: 4 }} lg={{ order: 3 }}>
        2 col-order-responsive
      </Col>
      <Col span={6} xs={{ order: 3 }} sm={{ order: 4 }} md={{ order: 2 }} lg={{ order: 1 }}>
        3 col-order-responsive
      </Col>
      <Col span={6} xs={{ order: 4 }} sm={{ order: 3 }} md={{ order: 1 }} lg={{ order: 2 }}>
        4 col-order-responsive
      </Col>
    </Row>
  </>
);
